<template>
  <el-card>
    <template #header>
      <span class="el-card-title">{{ params?.title || "默认传参标题" }}</span>
      <i-ep-close
        v-show="!panelSetIcon"
        class="el-icon-close"
        style="float: right; padding: 3px 0"
        @click="deletePanelItem"
      />
    </template>
    <ul>
      <li v-for="(item, index) in data" :key="index" @click="jumpUrl(item.url)">
        <div class="card-item">
          <img :src="item.img" />
          <span class="alias">{{ item.name }}</span>
        </div>
      </li>
    </ul>
  </el-card>
</template>

<script lang="ts" setup>
import pic1 from "@/assets/images/pic1.png";
import pic2 from "@/assets/images/pic2.png";
import pic3 from "@/assets/images/pic3.png";
import pic4 from "@/assets/images/pic4.png";
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, params } = toRefs(props);

const data = reactive([
  {
    img: pic1,
    name: "非产品项目管理",
    url: "https://element-plus.org/zh-CN/guide/design.html",
  },
  {
    img: pic2,
    name: "物资出门管理",
    url: "https://element-plus.org/zh-CN/guide/design.html",
  },
  {
    img: pic3,
    name: "变更申请单管理",
    url: "https://element-plus.org/zh-CN/guide/design.html",
  },
  {
    img: pic4,
    name: "本地流程图",
    url: "https://element-plus.org/zh-CN/guide/design.html",
  },
  {
    img: pic1,
    name: "固定资产管理",
    url: "https://element-plus.org/zh-CN/guide/design.html",
  },
  {
    img: pic2,
    name: "个人绩效系统",
    url: "https://element-plus.org/zh-CN/guide/design.html",
  },
]);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

function jumpUrl(url: string) {
  window.open(url);
}
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  color: lightslategrey;
}

:deep(.el-card__header) {
  padding: 10px;
}
:deep(.el-card__body) {
  height: calc(100% - 45px) !important;
  padding: 0 20px 10px 20px !important;
  vertical-align: bottom;
  display: flex;
  justify-content: center;
  overflow-y: auto;
}

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  li {
    // width: 100px;
    display: inline-block;
    width: 100px;
    flex-grow: 1;
    cursor: pointer;
    // background: aliceblue;
    .card-item {
      text-align: center;
      overflow: hidden;
      img {
        width: 60px;
        transform: scale(1);
        transition: all 0.4s;
        margin: 10px auto 0px;
      }
      span {
        font-size: 12px;
        color: #99a9bf;
        display: block;
        margin-bottom: 10px;
      }
    }
  }
  li:hover {
    cursor: pointer;
    img {
      transform: scale(1.2);
    }
  }
}
</style>
